<template>
  <div>
    <template v-if="applyInfo.length!==0">
      <div class="card mb-3">
        <h5 class="card-header border-0">报名信息</h5>
        <div class="card-body">
          <div class="row g-2">
            <template v-for="el in applyInfo">
              <div v-bind:key="el._id" class="card col-md-4 col-sm-12 overflow-hidden">
                <div class="card-body">
                  <p class="card-title" data-bs-toggle="tooltip" data-bs-placement="top"
                     :title="el.contest[0].name"><span class="cName" @click="GetContestByID(el.contestID)">{{
                      el.contest[0].name
                    }}</span>
                    <el-tag class="status" effect="dark" :type='el.status === 0?"info":el.status===1?"":"danger"'>{{
                        el.status === 0 ? "未审核" : el.status === 1 ? "通过" : "被驳回"
                      }}
                    </el-tag>
                  </p>
                  <h6 class="card-subtitle mb-2 text-muted">报名时间：{{ el.updateTime|time }}</h6>
                  <h6 class="card-subtitle mb-2 text-muted">竞赛类型：{{ el.contest[0].raceType|raceType }}</h6>
                  <template v-if="el.contest[0].raceType === 'T1'&&el.status===1">
                    <router-link to="Team" class="card-link">报名成功，去组队</router-link>
                  </template>
                  <template v-else-if="el.contest[0].raceType === 'T2'&&el.status===1">
                    <a href="#" class="card-link" data-bs-toggle="modal"
                       data-bs-target="#singleWork" @click="contestID = el.contestID;contestName = el.contest[0].name">报名成功，提交作品</a>
                  </template>
                  <template v-else-if="el.status===2">
                    <a href="#" class="card-link">审核失败，修改信息</a>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>

        <!--    模态框    -->
        <div class="modal fade" id="singleWork" tabindex="-1" aria-labelledby="a" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="a">提交个人作品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div>
                  竞赛名称：{{ contestName }}
                </div>
                <div>
                  <input @change="uploadFile" ref="file" single accept="application/"
                         class="form-control form-control-lg" id="file"
                         type="file">
                  <label for="formFileLg" class="form-label">只支持<span class="text-danger">.doc</span>文档类型文件</label>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" @click="handleUploadFile(false)">确认提交</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template v-else>
      <el-empty class="border" description="暂无报名信息"></el-empty>
    </template>
  </div>

</template>

<script>
import time from "../../../filter/time";
import raceType from "../../../filter/raceType";
import user from "../../../api/user";
import axios from "axios";

export default {
  name: "myApply",
  data() {
    return {
      applyInfo: '',
      contestID: '',
      contestName: '',
      userInfo: {...this.$store.getters["userStore/userInfo"]}
    }
  },
  filters: {
    time,
    raceType
  },
  mounted() {
    this.GetApplyInfo()
  },
  methods: {

    GetContestByID(id) {
      user.GetContestByID({id}).then(r => {
        localStorage.setItem("detail", JSON.stringify(r.data.data.c))
        this.$router.push("/detail")
      })
    },

    handleUploadFile(isTeam) {
      const loading = this.$loading({
        lock: true,
        text: '上传中...请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      axios.post("/api/Admin/upload/file", this.file).then((r) => {
        const param = {
          name: r.data.data.fileInfo.name,
          path: r.data.data.fileInfo.path,
          isTeam,
          teamID: this.uploadTeamID,
          userID: this.$store.getters["userStore/userInfo"]._id,
          contestID: this.contestID
        }
        user.uploadWork(param).then(r => {
          if (r.data.status === '200' && r.data.data.upload) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            loading.close()
          } else {
            this.$message.error('上传失败，作品已上传');
          }
        })
      }).catch(() => {
        this.$message.error('上传失败');
        loading.close()
      })
    },

    //上传文件
    uploadFile(e) {
      let form = new FormData()
      form.append("content", e.target.files[0])
      this.file = form
    },
    GetApplyInfo() {
      user.GetMyApplyInfoData().then(r => {
        this.applyInfo = r.data.data.apply
      })
    }
  }
}
</script>

<style scoped>
.status {
  position: absolute;
  right: 0;
  top: 0;
  transform: rotateZ(45deg) translate(9px, -26px);
  height: 40px;
  width: 71px;
  padding-top: 14px;
  padding-left: 20px;
}

.cName:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #40aaff;
}
</style>